<template>
	<div id="cinema">
	<div>
		<span>全城<i class="fa fa-caret-down"></i></span>
		<span>品牌<i class="fa fa-caret-down"></i></span>
		<span>特色<i class="fa fa-caret-down"></i></span>
	</div>	
	<div id="">
		<ul>
			<li v-for="item in cinemalist" :key="item.id">
				<p><span>{{item.name}}</span><span>{{item.price}}元起</span></p>
				<p class="second"><span >{{item.address}}</span><span>>{{item.distance}}m</span></p>
				<p class="third"><span >小吃</span><span>折扣卡</span></p>
			</li>

			<!-- <li>
				<p><span>燕山影剧院</span><span>37.5元起</span></p>
				<p class="second"><span>房山区燕山岗南路3号</span><span>>120m</span></p>
				<p class="third"><span>小吃</span><span>折扣卡</span></p>
			</li>
			<li>
				<p><span>万达影城昌平保利光魔店</span><span>37.9元起</span></p>
				<p class="second"><span>昌平区鼓楼南街佳莲时代广场四层</span><span>>80m</span></p>
				<p class="third"><span>小吃</span><span>折扣卡</span></p>
			</li>
			<li>
				<p><span>门头沟影剧院</span><span>30.9元起</span></p>
				<p class="second"><span>门头沟区新桥大街12号</span><span>>110m</span></p>
				<p class="third"><span>小吃</span><span>折扣卡</span></p>
			</li> -->
		</ul>
		
		
		
		
		
	</div>
	</div>
</template>

<script>
	export default{
		name:'Cinema',
		data(){
			return{
				cinemalist:[]
			}
		},
		created(){
			this.getCinemaDate()
		},
		methods:{
			getCinemaDate(){
				var that = this;
				axios.get('/mock/cinema.json')
				  .then(function (response) {
				    console.log(response);
					if(response.status==200){
						if(response.data && response.data.cinemalist){
							that.cinemalist = response.data.cinemalist;
						}
					}
				  })
				  .catch(function (error) {
				    console.log(error);
				  });
			}
			
			

		},
		
	}
</script>

<style scoped>
	#cinema{
		padding-top: 50px;
		padding-bottom: 50px;
	}
	#cinema div:first-child{
		display: flex;
		flex-direction: row;
		border-bottom: #CCCCCC 1px solid;
		text-align: center;
	}
	#cinema div:first-child span{
		flex: 1;
		
	}
	i{
		padding-left: 5px;
	}
	li{
		margin: 10px;
		border-bottom: 1px solid #CCCCCC;
	}
	li p:first-child span:not(:first-child){
		color: #E54847;
	}
	li p:first-child span:nth-child(2){
		margin: 0 3px;
	}
	li p:first-child span:nth-child{
		font-size: 12px;
	}
	.second span{
		color: #999;
		font-size: 0.75rem;
	}
	.second span:last-child{
		position: absolute;
		right: 10px;
	}
	.third span{
		color: #f90;
		border: 1px solid #f90;
		margin-right: 10px;
	}
	p{
		margin-bottom: 10px;
	}
	
	</style>
